<template>
  <header class="">
    <nav class="navbar navbar-expand-lg bg-light" style="">
      <div class="container-fluid">
        <a class="navbar-brand px-5" href="#">
          <img
            class="img-fluid"
            :src="require('@/assets/img/logo/logo-color-horizon-1.png')"
          />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="bi bi-list"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 my-nav">
            <template v-for="(item, index) in menuData" :key="index">
              <template v-if="item.children && item.children.length > 0">
                <li class="nav-item dropdown" style="width: 100px">
                  <a
                    class="nav-link dropdown-toggle"
                    href="#"
                    id="dropdown07"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                    >Dropdown</a
                  >
                  <ul class="dropdown-menu" aria-labelledby="dropdown07">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li>
                      <a class="dropdown-item" href="#">Another action</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </li>
                  </ul>
                </li>
              </template>
              <template v-else>
                <li class="nav-item text-center" style="width: 100px">
                  <a class="nav-link" :href="item.url">
                    {{ item.title }}
                  </a>
                </li>
              </template>
            </template>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
import { HeaderData } from "@/assets/js/data.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";

export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    console.log(proxy);

    const data = reactive({ menuData: HeaderData.MenuData });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {});
    return {
      ...refData,
    };
  },
};
</script>
<style lang="scss" scoped>
.my-nav {
  font-size: 1rem;

  .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #131313;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out;
    position: relative;
  }

  .nav-link:hover {
    color: rgb(113, 183, 183);
  }

  .nav-link:hover::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: #68a4c4;
    bottom: 0;
    left: calc(50% - 20px);
  }
}
</style>
